<template>
  <div>
    <!-- <transition name="fade" mode="out-in"> -->
    <!-- <transition name="fade" mode="in-out"
    enter-active-class="animate__animated animate__fadeInLeftBig"
    leave-active-class="animate__animated animate__fadeOutLeftBig"
    :duration="600"
    > -->
      <router-view />
    <!-- </transition> -->
    <pagefooter-nav v-if="pagefooter" />
  </div>
</template>

<script>
// 样式引入
import 'animate.css';
import { mapGetters } from 'vuex'
import pagefooterNav from '@/components/pagefooterNav'
export default {
  components: { pagefooterNav },
  computed: {
    ...mapGetters(['pagefooter']),
  },
  mounted() {
    window.addEventListener('online', this.online.bind(this))
    window.addEventListener('offline', this.offline.bind(this))
  },
  beforeDestroy() {
    window.removeEventListener('online', this.online.bind(this))
    window.removeEventListener('offline', this.offline.bind(this))
  },
  methods: {
    online() {
      this.$toast({
        message: '有网了',
        position: 'bottom',
        duration: 3000,
      })
    },
    offline() {
      this.$toast({
        message: '断网了',
        position: 'bottom',
      })
    },
  },
}
</script>

<style lang="scss">
.fade-enter-active,
.fade-leave-active {
  transition: opacity 2s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
